<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left">
        <img slot="left" src="../assets/nearby/fujin.png">
        <span>武汉市</span>
      </div>
      <!-- 搜索框 -->
      <div class="search">
        <input type="text" name="search" v-model="val"  @keyup.enter="search" placeholder="">
      </div>
      <div class="right" @click="fenlei()">
        <img slot="right" src="../assets/index/caidan.png">
      </div>
    </div>
    <div class="ym"></div>
    <!-- 菜单 -->
    <!-- <div class="menu">
      <div class="box">
        <div class="bar">
          <img src="../assets/nearby/yundong.png">
          <span>运动健身</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/shenghuo.png">
          <span>生活服务</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/peixun.png">
          <span>学习培训</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/gongchang.png">
          <span>工厂</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/jiankuang.png">
          <span>健康养生</span>
        </div>
      </div>
      <div class="box">
        <div class="bar">
          <img src="../assets/nearby/fuwu.png">
          <span>咨询服务</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/meishi.png">
          <span>美食</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/aiche.png">
          <span>爱车</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/fangchan.png">
          <span>房产</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/gouwu.png">
          <span>购物</span>
        </div>
      </div>
       <div class="box">
        <div class="bar">
          <img src="../assets/nearby/jiazhuang.png">
          <span>家装</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/yule.png">
          <span>休闲娱乐</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/zhusu.png">
          <span>酒店住宿</span>
        </div>
        <div class="bar">
          <img src="../assets/nearby/yangzhi.png">
          <span>养殖畜牧</span>
        </div> 
        <div class="bar">
          <img src="../assets/nearby/liren.png">
          <span>丽人</span>
        </div> 
      </div>
    </div> -->
    <!-- 产品列表 -->
    <div class="list">
      <div class="product" v-for="(item,index) in listList" :key="index">
        <div class="biao"></div>
        <div class="pic"  @click="nearsto(item.id)">
          <img v-if="item.fascia !=null" :src="item.fascia" :onerror="logo"> 
          <img v-else src="../assets/order_center/ddai.png" >
        </div>
        <div class="product_box">
          <div class="title"  @click="nearsto(item.id)">
            <span>{{item.shop_name}}</span> 
          </div>
          <div class="ac"  @click="nearsto(item.id)">
            <span>{{item.category}}</span>
          </div>
          <a :href="'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+item.latitude+','+item.longitude+';title:'+item.shop_name+'&referer=myapp'">
          <div class="address">
            <span>{{item.address}}</span>
            <div class="db">
              <img v-if="item.distance" src="../assets/nearby/db.png">
              <span v-if="item.distance">{{item.distance/1000}}Km</span>
            </div>
          </div>
          </a>
        </div>
      </div> 
    </div>
    <!-- 无数据 -->
			<div class="without" v-if="listList.length==0">
				<img src="../assets/order_center/kongbai.png" alt="">
				<span>暂无数据</span> 
			</div>

    <div class="n"></div>
    <!-- 底部tab -->
    <div class="tabbarWarp">
      <yd-tabbar class="cy_tabbar" fixed active-color="#e63f3f" color="#999" >
        <yd-tabbar-item title="首页" link="/">
          <img slot="icon" src="../assets/index/home-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="分类" link="/classify">
          <img slot="icon" src="../assets/index/classify-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="附近" link="/nearby" active>
          <img slot="icon" src="../assets/index/nearby.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="购物车" link="/information">
          <img slot="icon" src="../assets/index/information-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="我的" link="/mine">
           <img slot="icon" src="../assets/index/mine-hui.png">
        </yd-tabbar-item>
      </yd-tabbar>
    </div>
</div>
  
</template>

<script>
// 底部导航
import Vue from "vue";
import { TabBar, TabBarItem } from "vue-ydui/dist/lib.rem/tabbar";
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
export default {
  name: "nearby",
  data() {
    return {
      listList: [],
      val: "",
      logo: 'this.src="' + require("../assets/order_center/kongbai.png") + '"',
      lon: "114.2",
      lat: "30.2", 
    };
  },
  methods: {
    nearsto: function(ids) {
      this.$router.push("/nearsto?ids="+ids);
    },
    fenlei: function() {
      this.$router.push("/classify");
    },
    search() { 
      let self = this;
      this.lists(self.lon,self.lat,self.val);
    },
   
     lists(o,a,v) {
      let self = this;
      let url = "/api/distance/index";
      self.httpPost(
        url,
        { lon: '114.2', lat: "30.2", text: v, pageSize: 999, page: 1 },
        function(res) {
          if (res.code == 200) {
            self.listList = res.data.data;
          } else {
            self.$dialog.toast({ mes: res.msg });
          }
        }
      );
    }, 
    getLocation(){
      let self = this;
      let url = "/api/distance/index";
      self.httpPost( url,[],function(res) {
          if (res.code == 200) {
              wx.config({
                debug: true, 
                appId: 111, // 必填，公众号的唯一标识
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.nonceStr, // 必填，生成签名的随机串
                signature: res.signature,// 必填，签名
                jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
            });
          }
        }
      );
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                 self.lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                 self.lon = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                 console.log("...",self.lat,self.lon);
                 self.lists(self.lon,self.lat,self.val)
            },
             cancel: function (res) {
                  alert('用户拒绝授权获取地理位置');
            }
        });

    },
    gps(){
      let self = this;
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function (position) {  
                self.lon = position.coords.longitude;  
                self.lat = position.coords.latitude;  
                // alert(self.lon)
                // alert(self.lat)

                self.lists(self.lon,self.lat,self.val)
                },
                function (e) {
                var msg = e.code;
                var dd = e.message;
                console.log(msg)
                console.log(dd)
            }
          ) 
      }
    } 
  },
  created() {
    document.title = "附近";
    // this.getLocation()
    this.gps()
  }
};
</script>


<style scoped> 
.search {
  width: 5.1rem;
  height: 0.61rem;
}
input {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff url(../assets/nearby/sc.png);
  background-repeat: no-repeat;
  border-radius: 50px;
  background-position: 0.1rem center;
  background-size: 0.4rem;
  border: 1px solid #fff;
  text-indent: .52rem;
}
.tabbarWarp {
  width: 100%;
  border-top: 1px solid #cccccc;
  position: fixed;
  bottom: 0;
  z-index: 9999999;
}
.cy_tabbar {
  font-size: 0.3rem;
}
.yd-tabbar-icon img {
  width: 0.5rem;
}
.top_tab {
  width: 100%;
  padding: 0.1rem 0.3rem;
  background: #e63f3f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 999;
}
.top_tab .left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top_tab .left span {
  color: #fff;
  font-size: 0.24rem;
}
.top_tab .left img {
  width: 0.44rem;
  height: 0.51rem;
}
.top_tab .right img {
  width: 0.46rem;
}
.ym {
  height: 1.25rem;
}
.n {
  height: 1rem;
}
.menu {
  width: 100%;
  height: 4.7rem;
  background: #fff;
  padding: 0.2rem 0.3rem 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.menu .box {
  width: 100%;
  height: 24%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.menu .box .bar {
  display: flex;
  width: 20%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.menu .box .bar img {
  width: 0.68rem;
  height: 0.56rem;
}
.menu .box .bar span {
  color: #666;
  font-size: 0.24rem;
}
.list {
  width: 100%;
  padding: 0.1rem 0.1rem;
  display: flex;
  flex-direction: column;
}
.list .product {
  width: 100%;
  padding: 0.3rem 0.3rem;
  background: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.product:first-child ~ .product {
  margin-top: 0.1rem;
}
.list .product .pic {
  width: 32%;
  height: 1.85rem;
}
.list .product .pic img {
  width: 100%;
  height: 100%;
}
.list .product .product_box {
  width: 66%;
  margin-left: 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.list .product .product_box .title {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.list .product .product_box .title span {
  width: 78%;
  font-size: 0.3rem;
  color: #e77c26;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
}
.list .product .product_box .title .cate {
  border: 1px solid #e77c26;
  width: 0.7rem;
  height: 0.32rem;
  color: #e77c26;
  line-height: 0.32rem;
  border-radius: 6px;
  font-size: 0.24rem;
  text-align: center;
  font-weight: normal;
  margin-top: 0.05rem;
}
.list .product .product_box .ac {
  font-size: 0.26rem;
  color: #a3a3a3;
}
.list .product .product_box .address {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.list .product .product_box .address span {
  font-size: 0.26rem;
  color: #a3a3a3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list .product .product_box .address .db {
  display: flex;
  justify-content: center;
}
.list .product .product_box .address .db img {
  width: 0.32;
  height: 0.29rem;
}
.list .product .product_box .address .db span {
  font-size: 0.28rem;
  color: #e77c26;
}
.list .product .biao {
  position: absolute;
  right: -0.9rem;
  top: -1.2rem;
  transform: rotate(45deg);
  background: #e77c26;
  width: 1.5rem;
  height: 1.5rem;
  z-index: 999;
}
/* 无数据 */
.without {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0.3rem;
}
.without img {
  width: 3.23rem;
  height: 3.16rem;
}
.without span:nth-child(2) {
  font-size: 0.36rem;
  color: #707070;
  margin-top: 0.43rem;
}
.without span:nth-child(3) {
  font-size: 0.3rem;
  color: #b7b7b7;
  margin-top: 0.3rem;
}
.without .cate {
  color: #fff;
  width: 2.27rem;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 10px;
  font-size: 0.3rem;
  text-align: center;
  background: #e53a30;
  border: none;
  margin-top: 0.96rem;
}
</style>
